import React, { Component } from "react";
import { Modal, Tooltip,Form,Table,Row,Col,Spin } from 'antd';
import ScModal from '../../../components/feedback/scModal';
import { getStubGroupDetail } from "../../../fetch/fetchApi";

const FormItem = Form.Item;
const stubGroupType = {
    '0': '公共',
    '1': '个人',
    '2': '专用开放',
    '3': '专用内部'
};
class StubDetail extends Component {
    constructor(props) {
        super(props);
        this.state = {
            result: {}
        }

    }

    getStubGroupDetail(stubGroupId){
    	this.props.handle();
    	this.setState({
    		stubSpinning:true
    	})
    	getStubGroupDetail({
            stubGroupId: stubGroupId
        }).then((data) => {
            if (data.data.code === "200") {
                this.setState({
                    result: data.data.data
                })
            }
            this.setState({
	    		stubSpinning:false
	    	})
        })
    }

	componentDidMount(){
		this.getStubGroupDetail(this.props.stubGroupId);
	}

    componentWillReceiveProps(nextProps) {
        //if (nextProps.stubGroupId !== this.props.stubGroupId) {
        if(nextProps.stubGroupId){
        	this.setState({
                result: {}
            })
            this.getStubGroupDetail(nextProps.stubGroupId);
        }
        //}
    }

    render() {
        return (
        	<Spin spinning={this.state.stubSpinning}>
				<div className="sc-modal-scroll">
					<div className="modal-list">
						<div className={"modal-flex"}>
							<div className={"modal-flex-1"}>
								<ul>
									<li>
										<strong>电站名称</strong>
										<span>{this.state.result.name}</span>
									</li>
									<li>
										<strong>所在城市</strong>
										<span>{this.state.result.cityStr}</span>
									</li>
									<li>
										<strong>电站地址</strong>
										<Tooltip placement="topLeft" title={this.state.result.address}>
											<span>{this.state.result.address}</span>
										</Tooltip>
									</li>
									<li>
										<strong>运营类型</strong>
										<span>{this.state.result.type === 1 ? '自营' : '非自营'}</span>
									</li>
									<li>
										<strong>电站类型</strong>
										<span>{stubGroupType[this.state.result.stubGroupType]}</span>
									</li>
									<li>
										<strong>服务时间</strong>
										<span>{this.state.result.serviceTime}</span>
									</li>
									<li>
										<strong>是否带枪</strong>
										<span>{this.state.result.hasGun === 1 ? '是' : '否'}</span>
									</li>
									<li>
										<strong>车位引导</strong>
										<Tooltip placement="topLeft" title={this.state.result.stubGroupInfo}>
											<span>{this.state.result.stubGroupInfo}</span>
										</Tooltip>
									</li>
									<li>
										<strong>车位描述</strong>
										<Tooltip placement="topLeft" title={this.state.result.parkingInfo}>
											<span>{this.state.result.parkingInfo}</span>
										</Tooltip>
									</li>
									<li>
										<strong>停车费</strong>
										<Tooltip placement="topLeft" title={this.state.result.parkingFeeInfo}>
											<span>{this.state.result.parkingFeeInfo}</span>
										</Tooltip>
									</li>
									<li>
										<strong>电站公告</strong>
										<Tooltip placement="topLeft" title={this.state.result.noticInfo}>
											<span>{this.state.result.noticInfo}</span>
										</Tooltip>
									</li>
									<li>
										<strong>漫游状态</strong>
										<span>{this.state.result.enableRoaming === 1 ? '漫游' : '非漫游'}</span>
									</li>
									<li>
										<strong>电站状态</strong>
										<span>{this.state.result.isBuilded === 1 ? '上线' : '下线'}</span>
									</li>
									<li>
										<strong>所属商户</strong>
										<span>{this.state.result.equipmentOwnerName}</span>
									</li>
									<li>
										<strong>上线时间</strong>
										<span>{this.state.result.startTime}</span>
									</li>
								</ul>
							</div>
							<div className={"modal-flex-1"}>
								<ul>
									<li>
										<strong>充电价格</strong>
										<Tooltip placement="topLeft" title={this.state.result.totalFeeInfo&&this.state.result.totalFeeInfo.replace('#', '\n')}>
											<span>{this.state.result.totalFeeInfo&&this.state.result.totalFeeInfo.replace('#', '\n')}</span>
										</Tooltip>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
        	</Spin>
        )
    }
}
export default StubDetail;
